<template>
    <view class="page">
        <view class="page-form-list">
            <view class="page-form-item">
                <text>真实姓名</text>
                <input type="text" placeholder="请输入您的真实姓名" v-model="realname" />
            </view>
<!--            <view class="page-form-item">-->
<!--                <text>性别</text>-->
<!--                <picker class="item-picker" mode="selector" :value="sexItem" :range="sexList" @change="sexChange">-->
<!--                    <text></text>-->
<!--                    <img :src="File_Url+'right-grey.png'" />-->
<!--                </picker>-->
<!--            </view>-->
            <view class="page-form-item">
                <text>身份证</text>
                <input type="text" placeholder="请输入您的身份证号码" v-model="cardId" />
            </view>
            <view class="page-form-item" @click="toSearchCompany">
                <text>单位名称</text>
                <div class="btn" :class="{grey:unit_name==''}">{{unit_name==''?'请输入您的单位全称':unit_name}}</div>
<!--                <input type="text" placeholder="请输入您的公司全称" v-model="unit_name" />-->
            </view>
            <view class="page-form-item">
                <text>岗位</text>
                <input type="text" placeholder="请输入您的岗位" v-model="jobName" />
            </view>
            <view class="page-form-certificate">
                <view class="certificate-head">
                    <view class="title">在职证明</view>
                    <view class="example" @click="showExample">示例</view>
                </view>
                <view class="certificate-content" @click="uploadImg">
                    <img v-if="img_info.url!=''" :src="img_info.url" mode="widthFix" />
                    <view class="btn" v-if="img_info.url==''">
                        <img :src="File_Url+'add-a.png'" />
                        <text>点击上传图片</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="page-btn">
            <button @click="submitPersonalAuth">提交认证申请</button>
        </view>

<!--        示例弹窗-->
<!--        <view class="popup-mode" @click="showExample" v-if="modepupop">-->
<!--            <view class="popup-mode-content">-->
<!--                <img :src="File_Url+'example-img.jpg'" mode="widthFix" />-->
<!--            </view>-->
<!--        </view>-->
    </view>
</template>

<script>
    export default {
        name: "personAuth",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                sexList:['男','女'],
                sexItem:'',
                realname: '',
                cardId:'',
                unit_name: '',
                jobName: '',
                img_info:{
                    url: '',
                    id: ''
                },
                modepupop: false,
            }
        },
        methods:{
            // sexChange(e){
            //     this.sexItem = e.detail.value;
            // }
            toSearchCompany(){
                uni.navigateTo({
                    url: '/pages/Authentication/companySearch/companySearch?name='+this.unit_name
                })
            },
			async getPersonalAuthInfo(){
				//获取个人认证信息
				let res=await this.$api.getPersonalAuthInfo({user_token:uni.getStorageSync('userToken')});
				if(res.data.level=='success'){
					if(res.data.data){
						let data=res.data.data;
						this.realname=data.realname;
						this.cardId=data.id_card;
						this.unit_name=data.unit_name;
						this.jobName=data.job;
						this.img_info={
							url:data.work_img_url,
							id:data.work_img_id
						}
					}
				}
			},
			//上传在职证明
            async uploadImg(){
                let res=await this.$currency.upLoadImage(this,'file/upload-img')
                let data=JSON.parse(res.data)
                if(data.level!='success'){
                    uni.showToast({
                        title:data.message,
                        icon:'none'
                    })
                }else {
                    this.img_info={
                        url:data.data.img_url,
                        id:data.data.id
                    }
                }
            },
            //个人认证申请
            async submitPersonalAuth(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    realname: this.realname,
                    id_card: this.cardId,
                    unit_name: this.unit_name,
                    job: this.jobName,
                    work_img_id: this.img_info.id
                }
                const res = await this.$api.submitPersonalAuth(params);
                if (res.data.level == 'success'){

                    uni.showToast({
                        icon: 'success',
                        title: res.data.message,
                        duration: 1500
                    })
                    this.getTemplate();
                    /*
                    setTimeout(function () {
                        uni.navigateBack({
                            delta: 1
                        })
                    },1500)*/
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: res.data.message,
                        duration: 1500
                    })
                }
            },
            //获取订阅消息模板id
            async getTemplate(){
                const res = await this.$api.getTemplate({type: 'personal_auth'});
                if (res.data.level == 'success'){
                    wx.requestSubscribeMessage({
                        tmplIds: res.data.data,
                        success(res){
                            console.log(res);
                        },
                        complete(res){
                            setTimeout(function () {
                                uni.navigateBack({
                                    delta: 1
                                })
                            },1500)
                        }
                    })
                }
            },
            showExample(){
			    // if (this.modepupop){
                //     this.modepupop = false;
                // } else {
                //     this.modepupop = true;
                // }
                let url = [];
                url[0] = this.File_Url+'example-img.jpg';
                uni.previewImage({
                    urls: url
                })

            }
        },
        onShow(){
            let pages = getCurrentPages();
            let currPage = pages[pages.length - 1]; //当前页面
            if (currPage.data.name){
                this.unit_name = currPage.data.name;
            }
        },
		onLoad() {
			this.getPersonalAuthInfo()
		}
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        min-height: 100vh;
        @include flex(flex-start);
        flex-direction: column;
    }
    .page-form-list{
        background: #FFFFFF;
        width: 100vw;
        .page-form-item{
            padding: 38rpx 30rpx;
            width: calc(100% - 60rpx);
            border-bottom: 1rpx solid #E5E5E5;
            @include flex(flex-start);
            flex-direction: row;
            text{
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
            }
            .btn{
                max-width: 70%;
                margin-left: auto;
                height: 45rpx;
                line-height: 45rpx;
                text-align: right;
                @include ellipsis(1);
            }
            .grey{
                color: #858585 !important;
            }
            input{
                margin-left: auto;
                height: 45rpx;
                line-height: 45rpx;
                max-width: 70%;
                text-align: right;
            }
            .item-picker{
                margin-left: auto;
                @include flex(flex-end);
                flex-direction: row;
                text{
                    font-size: 32rpx;
                    line-height: 45rpx;
                    height: 45rpx;
                    color: #999999;
                }
                img{
                    width: 30rpx;
                    height: 30rpx;
                }
            }
        }
        .page-form-certificate{
            padding: 24rpx 30rpx;
            .certificate-head{
                padding: 14rpx 0;
                @include flex(flex-start);
                flex-direction: row;
                .title{
                    height: 45rpx;
                    line-height: 45rpx;
                    font-size: 32rpx;
                }
                .example{
                    margin-left: auto;
                    font-size: 32rpx;
                    height: 45rpx;
                    line-height: 45rpx;
                    color: #0A5FEC;
                }
            }
            .certificate-content{
                border: 1rpx dashed #0A5FEC;
                border-radius: 8rpx;
                @include flex();
                flex-direction: column;
                overflow: hidden;
                .btn{
                    padding: 72rpx 0;
                    @include flex();
                    flex-direction: column;
                    img{
                        width: 124rpx;
                        height: 124rpx;
                        margin-bottom: 20rpx;
                    }
                    text{
                        color: #666666;
                        font-size: 32rpx;
                        height: 45rpx;
                        line-height: 45rpx;
                    }
                }
            }
        }
    }
    .page-btn{
        margin-top: auto;
        padding: 60rpx 30rpx;
        width: calc(100vw - 60rpx);
        button{
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            color: #FFFFFF;
            font-size: 34rpx;
            background: #3782FF;
            border-radius: 44rpx;
        }
    }
    .popup-mode{
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 99999;
        background: rgba(0, 0, 0, 0.8);
        @include flex();
        flex-direction: column;
        .popup-mode-content{
            width: 80vw;
        }
    }
</style>
